<template>
  <!-- 仪表图 -->
  <div id="RadarChart">
    <div ref="chart01" class="chart01"></div>
  </div>
</template>

<script>
import { title } from 'process';

export default {
  name: "RadarChart",
  components: {},
  props: ['dName' , 'Dseries'],
  data() {
    return {
      value: 60
    };
  },
  computed: {},
  watch: {
     Dseries:{
        handler: function(newVal, oldVal) {
                this.drawRadarChart();
            },
            deep: true,
     }
  },
  created() {},
  mounted() {
    this.drawRadarChart();
  },

  methods: {
    drawRadarChart() {
      let that = this;
      let mychart = that.$echarts.init(that.$refs.chart01);
      let option = {
        grid: {
          //设置图表撑满整个画布
          left: '10%' ,
          top: 10 ,
          right: '10%' ,
          bottom: 60 ,
        },
        series: [
          {
            startAngle: 180, //仪表盘开始位置
            endAngle: 0,  //仪表盘末尾位置
            type: "gauge",
            center: ["50%","75%"], //仪表盘的位置
            radius: "150%", //仪表盘的大小
            // 仪表盘轴线相关配置。
            axisLine: {
              lineStyle: {
                width: 12,
                color: [[0.5, "#95F204"],[0.7, "#F59A23"],[1, "#D9001B"]],
              },
            },
            top: "0",
            // 去除仪表盘分割刻度
            splitLine:{
              show: false
            },
            // 标题设置
            title:{
              offsetCenter: [0, '40%'],
              color: "#fff",
              fontSize: 14,
            },
            // 数据设置
            detail: {
              color: "#fff",
              fontSize: 18,
              offsetCenter: [0, '-40%'],
            },
            // 指针的样式
            itemStyle: {
              color: "#71c184"
            },
            // 指针底座的配置
            anchor: {
              show: true,
              showAbove: true,
              size: 10,
              itemStyle: {
                borderWidth: 4,
                color: '#000',
                borderColor: '#71c184',
              },
              
               offsetCenter: [0,0], //底座位置
            },
            // 刻度数值标签
            axisLabel:{
              show: false
            },
            //仪表盘指针
            pointer:{
              showAbove: false,
              length: "70%",
              width: 4,
            },
            
            axisTick: {
              show: false, //去除仪表盘上的刻度
            },
            data: [
              {
                value: this.Dseries,
                name: this.dName,
              },
            ],
            //展示当前进度5.0开始支持目前用不到
            // progress: {
            //   show: true,
            //   width: 20
            // },
          },
        ],
      };
      mychart.setOption(option);
      //   窗口自适应
      // setTimeout(() => {
      //   let resizeFn = function () {
      //     mychart.resize();
      //   };
      //   window.addEventListener("resize", resizeFn);
      //   this.$once("hook:beforeDestroy", () => {
      //     mychart.dispose();
      //     mychart = null;
      //     window.removeEventListener("resize", resizeFn);
      //   });
      // }, 200);
    },
  },
};
</script>
<style lang='less' scoped>
#RadarChart {
  width: 100%;
  height: 100%;
  // margin-top: 36px;
  .chart01 {
    width: 100%;
    height: 100%;
    overflow: hidden;
    clear: both;
  }
}
</style>